<template>
  <div class="article">
    <div class="leftCard">
      <left-card @checkSideTab="checkSideTab"> </left-card>
    </div>
    <div class="content">
      <question-card
        v-for="item in questionList"
        :key="item.id"
        :questionTitle="item.questionTitle"
        :questionAnswer="item.questionAnswer"
        :questionType="item.questionType"
        :createdAt="item.createdAt"
        :id="item.id"
        :lookNum="item.lookNum"
        :preView="item.questionPreView"
        @goDetail="goQuestionDetail"
      ></question-card>
      <div style="margin-top: 20px; padding-bottom: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="curentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <div class="rightCard">
      <el-button class="loadBtn" @click="load">上传题库</el-button>
      <side-card
        :hotList="hotList"
        @goHotDetail="goHotQuestionDetail"
      ></side-card>
    </div>
  </div>
</template>

<script>
import QuestionCard from '@/components/QuestionCard.vue'
import SideCard from '@/components/SideCard.vue'
import LeftCard from '@/components/LeftCard.vue'
import { sendQuestion, getQuestions, getHostQuestions } from '@/api/api'
export default {
  components: {
    SideCard,
    QuestionCard,
    LeftCard
  },
  data() {
    return {
      hotList: [],
      questionList: [],
      curentPage: 1,
      pageSize: 10,
      total: 0,
      type: ''
    }
  },
  created() {
    if (this.$route.query?.data) {
      this.type = JSON.parse(this.$route.query?.data)?.item?.value
    } else {
      this.type = -1
    }
    console.log(this.type)
    this.getAllQuestions()
    getHostQuestions().then((res) => {
      this.hotList = res.data.data
    })
  },
  mounted() {},
  methods: {
    goHotQuestionDetail(item) {
      this.$router.push({
        path: `/questionsDetail/${item.id}`
      })
    },
    checkSideTab(index) {
      console.log(index)
      this.type = index
      this.getAllQuestions()
    },
    //获得全部题库
    getAllQuestions() {
      const data = {
        curentPage: this.curentPage,
        pageSize: this.pageSize,
        type: this.type
      }
      getQuestions(data).then((res) => {
        console.log(res.data.data)
        let data = res.data.data
        this.total = data.count
        this.questionList = data.rows
      })
    },
    load() {
      // const data = {
      //   questionTitle: "s家可好sa",
      //   questionAnswer: "因为男人都废物",
      //   questionType: "算法",
      //   userId: this.$store.getters.getUserInfo.id,
      //   questionPreView: "你想知道为什么pengpeng吗",
      // };
      // sendQuestion(data).then((res) => {
      //   console.log(res.data.data);
      // });
      const admin = this.$store.getters.getUserInfo.isAdmin
      if (!admin) {
        this.$message({
          message: '为保证题库的真实有效性，该功能只对管理员开放',
          type: 'error'
        })
        return
      }
      this.$router.push('/questionEditor')
    },
    goQuestionDetail(id) {
      console.log(id)
      this.$router.push({
        path: `/questionsDetail/${id}`
      })
    },
    // 选择每页展示几条
    handleSizeChange(val) {
      this.pageSize = val
      this.getAllQuestions()
      console.log(`每页 ${val} 条`)
    },
    // 选择去几页
    handleCurrentChange(val) {
      this.curentPage = val
      this.getAllQuestions()
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.article {
  width: 1200px;
  margin: 0 auto;
  margin-top: 76px;
  display: flex;
  // justify-content: space-between;
  .content {
    flex: 1;
  }
  .rightCard {
    margin-left: 10px;
    .loadBtn {
      margin: 6px 0;
      width: 260px;
      color: rgb(76, 167, 225);
    }
  }
  .leftCard {
  }

  ::v-deep .el-input .el-input__inner {
    padding: 10px 15px;
    height: 10px;
    letter-spacing: 1px;
    border: 1px solid #dcdfe6;
  }
  ::v-deep .el-input .el-input__inner::-webkit-input-placeholder {
    color: #999;
    font-size: 13px;
  }
}
</style>